<template>
  <div class="detail-main">
    <div class="common-content">
       <left-list ref="leftRef" ></left-list>
       <right-content :info="teamInfo" ref="rightRef"  ></right-content>
    </div>
  </div>
</template>

<script setup>

import LeftList from "./components/left-list.vue";
import RightContent from "./components/right-content.vue";
import {useRoute} from "vue-router";
import {homeApi} from "@/api";
const leftRef=ref()
const rightRef=ref()
const route=useRoute()
const id=route.query.id
const teamInfo=ref()

onMounted(getTeamInfo)
async function getTeamInfo(){
 const res=await  homeApi.getTeamInfo.get({id})
  teamInfo.value=res
  leftRef.value.getTeamLstPage(res)
}


function clickItem(item){
  rightRef.value.loadPageData(item.id)
}
</script>

<style scoped>
 .detail-main{
   padding: 40px 0;
   .common-content{
     display: flex;
     gap: 16px;
   }
 }
</style>
